<template>
  <div class="about">
    <h1>{{msg}}</h1>
    <button @click="add">添加</button>
    <button @click="addBatch">批量添加</button>
    <button @click="delBatch">批量删除</button>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
const {proxy} = getCurrentInstance();

const msg = ref('');

const hello = ()=>{
  proxy.$axios({
    method: 'get',
    url: '/hello'
  }).then(res=>{
    console.log(res.data);
    msg.value = res.data;
  })
}

const user = ref(null);

const add = ()=>{
  proxy.$axios({
    method: 'post',
    url: '/add',
    data: {
      userId : 1,
      userName: '张三',
      password: '123456'
    }
  }).then(res=>{
    user.value = res.data;
  })
}


const userList = ref([]);

const addBatch = ()=>{
  proxy.$axios({
    method: 'post',
    url: '/batch',
    data: [
      {
        userId : 1,
        userName: '张三',
        password: '123456'
      },
      {
        userId : 2,
        userName: '李四',
        password: '1111111'
      },
      {
        userId : 3,
        userName: '王五',
        password: '789678'
      }
    ]
  }).then(res=>{
    userList.value = res.data;
  })
}

const ids = ref([]);

const delBatch = ()=>{
  proxy.$axios({
    method: 'delete',
    url: '/batch',
    data: [1,2,3,4]
  }).then(res=>{
    userList.value = res.data;
  })
}



onMounted(()=>{
  hello();
})
</script>

